<template>
    <div class="case_detail_page">
        <!-- 导航 开始 -->
        <nav-bar title="案例详情"></nav-bar>
        <!-- 导航 end -->

        <!-- 图片轮播 开始 -->
        <div class="banner">
            <van-swipe class="swipe_box" :autoplay="3000" @change="onChange">
                <van-swipe-item v-for="(item, index) in (caseInfo.casePictures || [])" :key="index">
                    <!-- <img src="@/assets/images/h_banner.png" class="img" alt=""> -->
                    <li-image :src="item" class="img"></li-image>
                </van-swipe-item>
                <!-- <van-swipe-item><img src="@/assets/images/h_banner.png" class="img" alt=""></van-swipe-item>
                    <van-swipe-item><img src="@/assets/images/h_banner.png" class="img" alt=""></van-swipe-item>
                    <van-swipe-item><img src="@/assets/images/h_banner.png" class="img" alt=""></van-swipe-item> -->
                <template #indicator>
                    <div class="custom_indicator">{{ current + 1 }}/{{ caseInfo.casePictures.length }}</div>
                </template>
            </van-swipe>
        </div>
        <!-- 图片轮播 end -->

        <div class="head_box">
            <div class="user">
                <li-image :src="$getLogo(caseInfo.linkDoctor.photo)" class="img" round v-if="caseInfo.linkDoctor.photo" fit="contain" :is-preview="false"></li-image>
                <img src="@/assets/images/avatar_user.png" class="img" alt="" v-else>
                <span>{{ caseInfo.linkDoctor ? caseInfo.linkDoctor.name : '' }}</span>
            </div>
            <div class="visted">
                <img src="@/assets/images/browse.png" class="img" alt="">
                <span>{{ caseInfo.initReadCnt }}</span>
            </div>
        </div>

        <div class="case_content">
            <h2 class="h2_title">{{ caseInfo.caseTitle }}</h2>
            <div class="content" v-html="caseInfo.caseContent"></div>
            <div class="case_footer">
                <span>{{ caseInfo.createdDate }}</span>
                <span>发布于广东</span>
            </div>
        </div>

        <fixed-menu class="test">
            <button slot="right" class="btn" @click="lookDoctor">查看医生</button>
        </fixed-menu>


</div>
</template>
<script>
import { Swipe, SwipeItem } from 'vant';
import { GET_ORALCAVITYCASE_INFO } from '@/http/interface'
export default {
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem
    },
    data() {
        return {
            current: 0,
            caseInfo: {},
            title: "",
            description: "",
            keywords: "",
        }
    },
    head() {
        return {
            title: this.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.description,
                },
                {
                    hid: "Keywords",
                    name: "Keywords",
                    content: this.keywords,
                },
            ],
        };
    },
    async asyncData({ query, $axios,params }) {
        let res = await $axios.get(GET_ORALCAVITYCASE_INFO, { params: { id: params.id } })
        let caseInfo = res.data || {}
        return {
            caseInfo,
            title: caseInfo.seoTitle,
            keywords: caseInfo.seoKeywords,
            description: caseInfo.seoDescription,
        }
    },
    methods: {

        // 监听轮播图
        onChange(index) {
            this.current = index;
        },

        // 查看医生
        lookDoctor() {
            let o = this.caseInfo || {}
            this.$router.push({
                path: `/doctor/detail/${o.linkDoctorId}`,
            })
        }
    }
}
</script>
<style lang="less" scoped>@import '/assets/styles/inquire/case_detail.less';</style>